<template>
  <div>
    <!-- 标题部分 -->
    <h1 class="title" v-show="!show">
          {{titleA}}
      <span class="tag">{{tag}}</span>
      <a class="edit-btn" @click="add">编辑</a>
    </h1>


    <!-- 编辑内容 -->
    <div v-show="show">
      <div class="input-group">标题：<input type="text" v-model="titleB"></div>
      <div class="input-group">
        频道：<select v-model="tagB">
          <option value="前端">前端</option>
          <option value="测试">测试</option>
          <option value="Java">Java</option>
        </select>
      </div>
      <div class="operation">
        <button class="cancel" @click="show =!show">取消</button>
        <button class="confirm" @click="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
show:false,
titleA:"标题部分",
tag:"Java",
titleB:"",
tagB:"",
    }
  },
  methods:{
add(){
this.show=true
this.titleB=this.titleA
this.tagB=this.tag
},
confirm(){
  this.show=false
  this.titleA=this.titleB
this.tag=this.tagB
}

  }
};
</script>

<style>
.title {
  display: flex;
  align-items: center;
}

.tag {
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 8px;
  background-color: green;
  font-size: 0.6em;
  color: #fff;
}

.edit-btn {
  margin-left: 32px;
  font-size: 0.8em;
  color: lightskyblue;
}

.input-group {
  margin-top: 16px;
  font-size: 28px;
}

.input-group input,
.input-group select {
  width: 300px;
  border-color: #ddd;
  font-size: 28px;
}

.operation {
  margin-top: 16px;
}

.cancel {
  margin-left: 85px;
  background-color: #ddd;
}

.cancel,
.confirm {
  padding: 8px 24px;
  border: 0;
  border-radius: 4px;
}

.confirm {
  margin-left: 16px;
  background-color: #006699;
  color: #fff;
}
</style>
